Elm に本腰を入れてみようと - dev.jgs.me
次世代 JavaScript フレームワークが百花繚乱で戦国時代な今、自分が求めているのは Elm なんじゃないかとおもってきて環境つくるところからやった。
install
cabal でやるか pkg からインストールするか迷ったが、最終的に brew cask にした
code:_
% brew cask install elm-platform
evancz/elm-examples
code:_
% cd elm-examples
% elm-reactor
Elm Reactor 0.3
この elm-reactor がスゴくて、起動すると
https://cloud.githubusercontent.com/assets/557961/6058446/ddbf634c-ad6a-11e4-9927-eae713949500.png
というようなページが立ち上がって Hello.elm をクリックするとコンパイルされた実行結果のページが表示される。さらにすごいのが、Elm には Time Traveling Debugger っていう機能があって (http://debug.elm-lang.org/edit/Stamps.elm) Time Traveling の名の通り入力を巻き戻したりできるのだ。スパナのアイコンを押すとこのデバッガが立ち上がってデバッグできる。すごい。 Atom 環境
Syntax Reference
Example の Hello.elm には
code: (elm)
main : Element
main =
flow down
[ helloWorld
, welcomeGraphics
]
code: (elm)
{-------------------------------------------------------------
Elements can be combined into more complex layouts using
the flow function:
flow : Direction -> Element -> Element It is easy to change the direction of flow. Just use a
different value for the direction!
down, up, left, right, inward, outward : Direction
Try switching "down" in the code below with "up".
-------------------------------------------------------------}
import Graphics.Element (..)
import Text (..)
main : Element
main =
flow right
[ plainText "By using the \"flow\" function,"
, plainText "we can stack elements"
, plainText "on top of other elements."
]
flow の定義は flow : Direction -> [Element] -> Element で、Direction (down, up, left, right, inward, outward : Direction) と [Element] から Element をつくる関数のようだ。なので up とすると
code:_
on top of other elements.
we can stack elements
By using the "flow" function,
になるし right にすると
code:_
By using the "flow" function,we can stack elementson top of other elements.
横に連結するような定義になっているようだ。実際に生成される html を見てみると right とか left をつけると inline style で float left とか float right が勝手に設定されて意図したデザインとなる。ここだけ取ってみても従来の HTML + CSS + JavaScript の構成でドキュメント構造考えて...スタイル考えて...スクリプト書いて...というようなはっきり言ってめんどくさいことをやらずに済むことが分かる。
とりあえず今日はこの辺で。